<template>
  <div>
    <!--    titleHelpMessage="温馨提醒"-->
    <!--    :striped="striped"-->
    <!--    :bordered="border"-->
    <!--    showTableSetting-->

    <!--    <div class="group">-->
    <!--      <div class="group_i">-->
    <!--        <div class="group_i_r">姓名: <Input v-model:value="keyword"></Input></div>-->
    <!--        <div class="group_i_r">-->
    <!--          <Calendar format="YYYY-MM" :fullscreen="false" v-model:value="year" mode="year"-->
    <!--                    @panelChange="onPanelChange"></Calendar>-->
    <!--        </div>-->

    <!--      </div>-->
    <!--      <div class="group_i">-->
    <!--        <div class="group_i_r">-->
    <!--          <Button @click="aoaToExcel"> 导出excel</Button>-->

    <!--        </div>-->
    <!--        <div class="group_i_r">-->
    <!--          <Button type="primary" @click="searchFn">查询</Button>-->

    <!--        </div>-->
    <!--      </div>-->
    <!--      -->
    <!--    </div>-->

    <BasicTable
      title="出勤率统计"
      :columns="columns"
      :dataSource="data"
      :bordered="border"
      :striped="striped"
      :canResize="canResize"
      :loading="loading"
      :pagination="pagination"
      @change="changeFn"
      @columns-change="handleColumnChange"
    >
      <template #toolbar>
        <div class="Table_i">
          <label style="width: 100px">姓名:</label> <Input v-model:value="keyword"></Input>
        </div>
        <div class="Table_i">
          <label style="width: 100px; padding-top: 10px">日期:</label
          ><Calendar
            format="YYYY-MM"
            :fullscreen="false"
            v-model:value="year"
            mode="year"
            @panelChange="onPanelChange"
          ></Calendar>
        </div>
        <Button @click="aoaToExcel"> 导出excel</Button>
        <Button @click="reload">重置</Button>

        <Button type="primary" @click="searchFn">查询</Button>

        <RedoOutlined @click="reload" />
      </template>
    </BasicTable>

    <FormModal @register="register" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction, ColumnChangeParam } from '@/components/Table';
  import { RedoOutlined } from '@ant-design/icons-vue';

  // import { dutyTableListApi } from '@/api/sys/sysData';
  import { ref, onMounted, h } from 'vue';
  import { DatePicker, Calendar, Tag, Input, Button } from 'ant-design-vue';

  import FormModal from './FormModal.vue';
  import util from '@/utils/util';
  import { searchFormSchema } from './role.data';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useModal } from '@/components/Modal';
  import { aoaToSheetXlsx, jsonToSheetXlsx } from '@/components/Excel';

  defineOptions({ name: 'integralList' });
  const { createMessage } = useMessage();

  const data = ref([]);
  const canResize = ref(false);
  const loading = ref(false);
  const striped = ref(true);
  const border = ref(true);

  const page = ref(1);
  const pageSize = ref(20);
  const keyword = ref('');
  const pagination = ref<any>({
    pageSize: 20,
  });

  const year = ref('');
  const excel_header = ref({
    userName: '姓名',
  });
  const base_excel_header_arr = ['userName'];
  const excel_header_arr = ref([]);

  const base_columns = [
    {
      title: '姓名',
      dataIndex: 'userName',
    },
  ];
  const columns = ref([]);

  function handleColumnChange(data: ColumnChangeParam[]) {
    console.log('ColumnChanged', data);
  }

  function reload() {
    year.value = '';
    keyword.value = '';
    page.value = 1;
    pageSize.value = 20;
    searchFn();
  }

  function changeFn(res) {
    // console.log(res)
    page.value = res.current;
    pageSize.value = res.pageSize;
    searchFn();
  }

  function searchFn() {
    let json = {
      year: year.value,
      page: page.value,
      keyword: keyword.value,
      pageSize: pageSize.value,
    };
    loading.value = true;
    // pagination.value.pageSize= pageSize;
    let let_columns = util.copy(base_columns);
  }

  function onPanelChange(value, mode) {
    // let arr=value.$y;
    let text = value.$y + '';
    console.log(text);
    year.value = text;
    searchFn();
  }

  onMounted(() => {
    searchFn();
    // console.log(util.times("year"))
  });

  function aoaToExcel() {
    // 保证data顺序与header一致
    let y = util.times('year') + '';
    // let arrHeader=[ "姓名","职级"];
    let arr = data.value;
    let new_arr = [];
    arr.forEach((r) => {
      let json = {};
      for (let key in excel_header.value) {
        json[key] = r[key];
      }
      new_arr.push(json);
    });
    // aoaToSheetXlsx({
    //   data: [arr],
    //   header: arrHeader,
    //   filename: y+'读书打卡统计.xlsx',
    // });
    // console.log("--excel_header_arr",excel_header_arr.value)
    // return;
    jsonToSheetXlsx({
      data: new_arr,
      header: excel_header.value,
      filename: y + '读书打卡统计.xlsx',
      json2sheetOpts: {
        // 指定顺序
        header: excel_header_arr.value,
      },
    });
  }

  /**
   * ------------
   */

  // const [register, { openModal, closeModal }] = useModal();
  //
  //   const [registerTable, { reload }] = useTable({
  //     title: '打卡出勤率列表',
  //     api: dutyTableListApi,
  //     columns,
  //     formConfig: {
  //       labelWidth: 120,
  //       schemas: searchFormSchema,
  //       autoSubmitOnEnter: true
  //     },
  //     useSearchForm: true,
  //     showTableSetting: true,
  //     bordered: true,
  //     showIndexColumn: false,
  //     afterFetch:function (res){
  //       console.log("---afterFetch")
  //       console.log(res)
  //     }
  //     // actionColumn: {
  //     //   width: 80,
  //     //   title: '操作',
  //     //   dataIndex: 'action',
  //     //   // slots: { customRender: 'action' },
  //     //   fixed: undefined,
  //     // },
  //   });

  function handleCreate() {}

  function handleEdit(record: Recordable) {}

  function handleDelete(record: Recordable) {
    //console.log(record);
  }

  function handleSuccess() {}
</script>
<style lang="less">
  //使日历面板不显示
  .vben-basic-table-header__toolbar {
    .ant-picker-panel {
      display: none;
    }
  }
  .group {
    display: flex;
    justify-items: center;
    background: white;
    width: 100%;
    margin: 20px 10px;
    padding: 15px 10px;
    .ant-picker-panel {
      display: none;
    }
    .group_i {
      display: flex;
      width: 100%;
      .group_i_r {
        display: flex;
      }
    }
  }
  .Table_i {
    display: flex;
    justify-items: center;
    text-align: center;
    margin-right: 20px;
  }
</style>
